<template>
  <div class="login-page">
    <v-header></v-header>
    <div class="cc-content">
      <div class="left-content">
        <img :src="require('@assets/images/ai.png')" alt="ai" class="ai-img">
        <img :src="require('@assets/images/timg.png')" alt="timg">
      </div>
      <div class="right-content">
        <div class="lg-center">
          <p class="title">登陆</p>
          <el-form
            :model="ruleForm"
            :rules="rules"
            ref="ruleForm"
            label-width="70px"
            class="demo-ruleForm"
            size="small"
            label-position="left"
          >
            <el-form-item label="用户名" prop="name">
              <el-input type="text" placeholder="用户名" v-model="ruleForm.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="pwd">
              <el-input type="password" placeholder="密码" v-model="ruleForm.pwd" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" :disabled="isOk" @click="submitForm">提交</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
    <v-footer></v-footer>
  </div>
</template>

<script>
import { mapActions } from "vuex";
import PageHeader from "@components/header/index.vue";
import PageFooter from "@components/footer/index.vue";
import { LOGINAPIS } from "@apis/index.js";
import Tools from "@untils/index.js";

export default {
  name: "login",

  data() {
    return {
      ruleForm: {
        name: "",
        pwd: ""
      },
      rules: {
        name: [{ required: true, message: "请输入用户名", trigger: "change" }],
        pwd: [{ required: true, message: "请输入密码", trigger: "change" }]
      }
    };
  },

  created() {
    this.routerPath = Tools.routerPath.bind(this);
  },

  mounted() {
    console.log(this.$route)
  },

  computed: {
    isOk() {
      return !this.ruleForm.name || !this.ruleForm.pwd;
    }
  },

  methods: {
    submitForm() {
      let { ruleForm: data } = this;
      let options = { ...LOGINAPIS.login, data };
      this._req.ajax(options).then(
        data => {
          let userInfo = {
            property: "userInfo",
            data
          };
          this.setStateData(userInfo);
          this.routerPath("/home");
        },
        err => {
          Tools.tooltip({ type: "error", message: err.message || "请求失败" });
        }
      );
    },

    ...mapActions("login", ["setStateData"])
  },

  components: {
    "v-header": PageHeader,
    "v-footer": PageFooter
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
@import "./scss/index.scss";
</style>
